<link href="css/ad.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(){
					$('.caption').animate({
						bottom:-35
					},100);
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log(current);
					};
				}
			});
		});
	</script>

<div class="banner mid">
		<div id="example">
			<div id="slides">
				<div class="slides_container">
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner.jpg" width="953" height="300" alt="Slide 1"></a>
						<div class="caption" style="bottom:0">
							<p>Happy Bokeh Thursday!</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner2.jpg" width="953" height="300" alt="Slide 2"></a>
						<div class="caption">
							<p>Taxi</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner.jpg" width="953" height="300" alt="Slide 3"></a>
						<div class="caption">
							<p>Happy Bokeh raining Day</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner2.jpg" width="953" height="300" alt="Slide 4"></a>
						<div class="caption">
							<p>We Eat Light</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner.jpg" width="953" height="300" alt="Slide 5"></a>
						<div class="caption">
							<p>&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner2.jpg" width="953" height="300" alt="Slide 6"></a>
						<div class="caption">
							<p>lanrentuku.com</p>
						</div>
					</div>
					<div>
						<a href="#" title="#" target="_blank"><img src="images/main_banner.jpg" width="953" height="300" alt="Slide 7"></a>
						<div class="caption">
							<p>Save my love for loneliness</p>
						</div>
					</div>
				</div>
				<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="img/example-frame.png" width="1103" height="364" alt="Example Frame" id="frame">
		</div>

</div>
